/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {BaseElement, element} from "../BaseElement.js";

@element("lit-progress-bar")
export class LitProgressBar extends BaseElement {
    static get observedAttributes() {
        return ['loading']
    }

    get loading(): boolean {
        return this.hasAttribute("loading");
    }

    set loading(value: boolean) {
        if (value) {
            this.setAttribute('loading', '');
        } else {
            this.removeAttribute('loading');
        }
    }

    initElements(): void {
    }

    initHtml(): string {
        return `
<style>
    :host{
        width: 100%;
        height: 1px;
        display: flex;
        position: absolute;
        overflow: hidden;
    }
    .root{
        width: 100%;
        height: 100%;
        position:relative;
    }
    :host([loading]) .track1{
        position: absolute;
        width: 30%;
        height: 100%;
        background-image: linear-gradient(to right,transparent,  #535da6, #535da6, #535da6, #535da6,#535da6,transparent);
        left: -30%;
        animation: anim 1.7s linear 0s infinite;
    }
    :host([loading]) .track2{
        position: absolute;
        width: 30%;
        height: 100%;
        background-image: linear-gradient(to right,transparent,  #535da6, #535da6, #535da6, #535da6,#535da6,transparent);
        left: -30%;
        animation: anim 1.7s  ease-in-out  0.7s infinite;
    }
    @keyframes anim {
      0% {
        left:-30%;
      }
      
      100% {
        left:100%;
      }
    }
   
</style>
<div class="root">
    <div class="track1"></div>
    <div class="track2"></div>
</div>
        `;
    }
}
